<template>
  <el-form
    class="apply-form first-form"
    :model="accountLogin"
    :rules="accountLoginRules"
    ref="accountLogin"
  >
    <el-form-item prop="email">
      <el-input
        type="text"
        v-model="accountLogin.email"
        :class="{ haveValue: accountLogin.email }"
        placeholder="邮箱/用户名/手机号"
      ></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="accountLogin.password"
        :class="{ haveValue: accountLogin.password }"
        placeholder="请输入密码"
        show-password
        @keyup.enter.native="handelEnterKey"
      ></el-input>
    </el-form-item>
    <div class="autoLoginBox">
      <div class="checkAutoLogin">
        <el-checkbox
          label="7天内自动登录"
          v-model="accountLogin.autoLogin"
          name="type"
        ></el-checkbox>
      </div>
      <div class="forgetPwdAndUnLogin">
        <router-link :to="{ name: 'Resetpwd' }">
          <div class="forgetPwd">忘记密码</div>
        </router-link>
        <!-- <div class="linear" />
        <div class="unLogin">无法登录</div> -->
      </div>
    </div>
    <el-form-item>
      <el-button
        type="primary"
        class="loginBtn"
        :loading="load"
        @click="verificationValue"
        >登录</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
import { login } from "@/request/user";
import md5 from "js-md5";
export default {
  data() {
    return {
      // 账号登录参数
      accountLogin: {
        email: "",
        password: "",
        autoLogin: false,
      },
      // 账号登录输入验证
      accountLoginRules: {
        email: [
          {
            required: true,
            message: "请输入邮箱/用户名/手机号",
            trigger: "check",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      load: false,
      loging: false, // 防止控制多次请求
    };
  },
  methods: {
    // 按下回车键
    handelEnterKey() {
      this.verificationValue();
    },
    // 登录前验证参数
    verificationValue() {
      this.$refs["accountLogin"].validate((valid) => {
        if (valid) {
          this.handelLogin();
        } else {
          return false;
        }
      });
    },
    // 请求登录接口
    async handelLogin() {
      // 如果正在登录中 终止此次登录
      if (this.loging) return;
      const params = {
        userName: this.accountLogin.email,
        // password: this.accountLogin.password,
        password: md5(this.accountLogin.password),
        isRemember: this.accountLogin.autoLogin, // 7天内自动登录
      };
      if (this.email == "" || this.password == "") {
        this.$message({
          message: "用户名或密码不能为空",
          type: "warning",
        });
        return;
      }
      this.load = true;
      this.loging = true;
      let a = await this.$store.dispatch("user/Login", {
        params: params,
        this: this,
      });
      this.load = false;
      if (a) {
        if (this.$refs.accountLogin) this.$refs.accountLogin.resetFields();
        const routerParams = this.$router.currentRoute.params;
        if (routerParams.rediretUrl) return window.location.href = routerParams.rediretUrl
        if (routerParams.routePath || routerParams.query) {
          this.$router.replace({
            path: routerParams.routePath,
            query: routerParams?.query,
          });
        } else {
          // this.$router.replace({ name: "Home" });
          this.$router.go(-1)
        }
      } else {
        this.loging = false;
      }
    },
  },
};
</script>

<style lang="stylus">
.accountLoginBox {
  .autoLoginBox {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .checkAutoLogin {
      .el-checkbox {
        .el-checkbox__label {
          font-family: Segoe UI;
          font-size: 12px;
          color: #707070;
          opacity: 0.6;
        }

        .el-checkbox__inner:hover {
          border-color: #d9d7d7;
        }

        .is-checked {
          .el-checkbox__inner {
            background: #ececec;
            border-color: #d9d7d7;
          }

          .el-checkbox__inner::after {
            color: #3d3d3d;
            border-color: #3d3d3d;
            border-width: 2px;
          }
        }

        .el-checkbox__input, .is-focus {
          border-color: #d9d7d7;

          .el-checkbox__inner {
            border-color: #d9d7d7;
          }
        }
      }
    }
  }

  .forgetPwdAndUnLogin {
    display: flex;
    align-items: center;
    font-family: Segoe UI;
    font-size: 12px;
    color: #707070;
    opacity: 0.6;

    a {
      font-family: Segoe UI;
      font-size: 12px;
      color: #707070;
      opacity: 0.6;
    }

    .linear {
      margin: 0 20px;
      width: 1px;
      height: 15px;
      background: #909090;
      opacity: 0.29;
    }
  }
}
</style>